<template>
  <div class="wrap container-fluid">
    <div class="left-box col-sm-3 col-3 col-md-3">
      <img :src="data.imgUrl"
           class="i-img">
    </div>
    <div class="right-box col-sm-9 col-9 col-md-9">
      <p class="tex">{{data.text}}</p>
      <span class="date">{{data.month}}月{{data.day}}日</span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'NoticeItem',
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {

  }
}
</script>

<style scoped>
p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 0;
  margin-left: 0;
}
.wrap {
  display: flex;
  justify-content: center;
  border-bottom: solid 1px #ddd;
}
.left-box {
  position: relative;
  display: flex;
  margin-left: 2%;
  width: 25%;
  height: 0;
  padding-top: 25%;
}
.i-img {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}
.right-box {
  position: relative;
  padding-left: 4%;
  padding-top: 2%;
}
.tex {
  overflow: hidden;
  text-overflow: ellipsis;
  /* font-size: 15px; */
  color: #778899;
  font-weight: bold;
}
.date {
  position: absolute;
  bottom: 5%;
  display: inline-block;
  color: #4682b4;
}
/* 响应式 */
@media (min-width: 270px) and (max-width: 575.98px) {
  .wrap {
    font-size: 14px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .wrap {
    font-size: 24px;
  }
}
@media (min-width: 767px) and (max-width: 991.98px) {
  .wrap {
    font-size: 26px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .wrap {
    font-size: 28px !important;
  }
}
@media (min-width: 1200px) {
  .wrap {
    font-size: 30px !important;
  }
}
</style>
